<template>
  <article>
    <el-row :gutter="20">
      <el-col :span="16">
        <div class="ta-article__container-l">
          <div class="ta-article__item">
            <label>文章标题</label>
            <el-input
              placeholder="请输入文章标题"
              v-model="article.title">
            </el-input>
          </div>
          <div class="ta-article__item">
            <label>文章概述</label>
            <el-input type="textarea" class="ta-textarea" placeholder="请输入文章概述" v-model="article.desc">
            </el-input>
          </div>
          <div class="ta-article__item">
            <label>文章内容</label>
            <Markdown @sendMarkdown="getMarkdown" ref="editor" v-model="article.markdown"></Markdown>
          </div>
        </div>
      </el-col>

      <el-col :span="8">
        <div class="ta-article__container-r">
          <!-- 文章分类 -->
          <div class="ta-article__prop">
            <div class="header">
              <el-icon name="ios-paper-outline"></el-icon>
              <span>文章分类</span>
            </div>
            <div class="body">
              <el-select placeholder="请选择文章分类" v-model="article.sort">
                <el-option
                  v-for="item in sortList"
                  :key="item._id"
                  :label="item.title"
                  :value="item._id">
                </el-option>
              </el-select>
            </div>
          </div>
          <!-- 文章标签 -->
          <div class="ta-article__prop">
            <div class="header">
              <el-icon name="ios-pricetags-outline"></el-icon>
              <span>文章标签</span>
            </div>
            <div class="body">
              <div class="tags">
                <span class="tag"
                  v-for="(tag, i) in tagList" :key="i"
                  :class="{ 'tag-selected': article.tags.some(item => item.title === tag.title) }"
                  @click="toggleSelectedTag(tag)">
                  {{ tag.title }}
                </span>
              </div>
            </div>
          </div>
          <!-- 文章封面 -->
          <div class="ta-article__prop">
            <div class="header">
              <el-icon name="ios-cloud-upload-outline"></el-icon>
              <span>文章封面</span>
            </div>
            <div class="body" style="overflow: hidden">
              <!-- <el-upload :cover="article.cover" @success="getImageName($event)"></el-upload> -->
              <i-upload :cover="article.cover" @success="setCover($event)"></i-upload>
            </div>
          </div>
          <!-- 文章发布 -->
          <div class="ta-article__prop">
            <div class="header">
              <el-icon name="ios-book-outline"></el-icon>
              <span>文章发布</span>
            </div>
            <div class="body">
              <el-select placeholder="请选择文章状态" v-model="article.state">
                <el-option
                  v-for="item in blogStates"
                  :key="item.value"
                  :label="item.title"
                  :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="footer">
              <el-button @click="preview()">预览</el-button>
              <el-button type="primary" @click="publish()">发布</el-button>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </article>
</template>
<script>
    import { mapGetters } from 'vuex'
    import Markdown from 'base/Markdown'
    import iUpload from 'base/Upload'
    import marked from 'common/utils/marked'
    export default {
      data() {
        return {
          article: {
            title: '',
            desc: '',
            sort: '',
            tags: [],
            cover: '',
            markdown: '',
            html: '',
            state: '',
            source: '',
            author: ''
          },
          loading: false
        }
      },
      props: ['articleId'],
      created() {
        if (this.articleId) {
          this.fetchArticle()
          this.article.id = this.articleId
        }
      },
      components: {
        Markdown,
        iUpload
      },
      methods: {
        // 上传文章封面
        async setCover(avatar) {
          this.article.cover = avatar
          console.log(this.article.cover)
        },
        // 获取文章
        fetchArticle() {
          this.article = {
            title: this.blogInfo.title,
            desc: this.blogInfo.desc,
            sort: this.blogInfo.sort,
            tags: this.blogInfo.tags,
            cover: this.blogInfo.cover,
            markdown: this.blogInfo.markdown,
            state: this.blogInfo.state,
            source: this.blogInfo.source,
            author: this.blogInfo.author
          }
        },
        toggleSelectedTag(tag) {
          const arr = this.article.tags
          const index = arr.indexOf(arr.find(item => item.value === tag.value))
          if (index > -1) {
            arr.splice(index, 1)
          } else {
            arr.push(tag)
          }
        },
        getMarkdown(markdown) {
          this.article.markdown = markdown
        },
        // 文章预览
        preview() {
          this.$refs['editor'].$el.querySelector('.fa-eye').click()
        },
        // 发布文章前的检查
        publish() {
          this.article.author = this.name
          const flag = Object.keys(this.article).every(key => {
            if (key === 'cover' || key === 'tags' || key === 'source' || key === 'html') {
              return true
            }
            // eslint-disable-next-line
            return !!this.article[key]
          })
          if (!flag) {
            this.$message.warning('请完善文章信息')
          } else {
            const { html, toc } = marked(this.article.markdown)
            this.article.html = html
            this.article.toc = toc
            console.log(this.article)
            if (this.articleId) {
              this.updateArticle()
            } else {
              this.publishArticle()
            }
          }
        },
        // 转换markdown -> html
        // transfor2Html(article) {
        //   return Promise.resolve(import('showdown').then(showdown => {
        //     const convert = new showdown.Converter()
        //     const html = convert.makeHtml(this.article.markdown)
        //     return html
        //   }))
        // },
        async publishArticle() {
          try {
            const message = await this.$store.dispatch('AddBlog', this.article)
            this.$message({
              message: message.msg,
              type: 'success'
            })
            this.loading = false
            this.reset()
            this.$router.push('/article/index')
          } catch (e) {
            this.loading = false
          }
        },
        async updateArticle() {
          try {
            const message = await this.$store.dispatch('UpdateBlog', this.article)
            this.$message({
              type: 'success',
              message: message.msg
            })
            this.reset()
            this.$router.push('/article/index')
            this.loading = false
          } catch (e) {
            this.loading = false
          }
        },
        // 重置文章信息
        reset() {
          this.article = {
            title: '',
            desc: '',
            sort: '',
            tags: [],
            cover: '',
            markdown: '',
            html: '',
            state: '',
            source: '',
            author: {}
          }
        }
      },
      computed: {
        ...mapGetters([
          'name',
          'blogInfo',
          'tagList',
          'sortList',
          'blogStates'
        ])
      }
    }
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
article {
  .ta-article__container-l {
    background: #fff;
    margin: 15px 0 15px 15px;
    padding: 15px;
    border-radius: 4px;
    &:hover {
      box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 6px;
      border-color: #ededed;
    }
    .ta-article__item {
      margin-top: 15px;
      label {
        display: block;
        margin-bottom: 10px;
      }
    }
  }
  .ta-article__container-r {
    margin: 15px 15px 15px 0;
    border-radius: 4px;
    .ta-article__prop {
      margin-bottom: 15px;
      border-radius: 4px;
      background-color: #fff;
      &:hover {
        box-shadow: rgba(0, 0, 0, 0.3) 0px 1px 6px;
        border-color: #ededed;
      }
      .header {
        padding: 14px 16px;
        border-bottom: 1px solid #e9eaec;
        font-weight: 500;
        font-size: 14px;
      }
      .body {
        padding: 10px 16px 16px;
        .tags {
          font-size: 14px;
          .tag {
            display: inline-block;
            padding: 3px 5px;
            margin-right: 5px;
            margin-top: 5px;
            color: #262626;
            border: 1px solid #ccc;
            border-radius: 4px;
            &:hover {
              cursor: pointer;
            }
          }
          .tag-selected {
            color: #fff;
            background-color: #409EFF;
            border-color: #409EFF;
          }
        }
      }
      .footer {
        padding: 14px 16px;
        border-top: 1px solid #e9eaec;
        text-align: right;
      }
    }
  }
}
</style>
